<template>
    <div class="about-page">
        <div class="gywmzhong">
            <h2 class="animate__animated animate__fadeInLeft wow">公司概况</h2>
            <p class="animate__animated animate__fadeInLeftBig wow">/&emsp;Company&nbsp;profile</p>
            <div class="gywmrunqi">
                <div :style="{ backgroundImage: `url(${require('@/assets/images/about/办公环境2.jpg')})` }"
                    class="animate__animated animate__lightSpeedInLeft wow">

                </div>
                <div>
                    <p class="animate__animated animate__fadeInRightBig wow">
                        易凡科技成立于2020年，是一家专注于软件开发和信息技术服务的高科技企业。
                        公司设有管理学院、信息科学技术学院、工程学院等多个学院，提供包括经济管理、
                        信息技术、工程技术等多个学科领域的本科专业和硕士研究方向。拥有优秀的师资队伍，
                        结构合理，包括资深教授、副教授和行业专家，能够为学生提供全面的教育和指导。
                        公司位于兰州市，校园环境优美，设施完善，为师生提供良好的学习与生活条件。
                        公司注重教学质量和科学研究，开展各类科研项目和实践教学活动，促进教学科研的深度融合，
                        提升学生的综合素质。以高质量的教学和科研为基础，易凡科技致力于为社会培养高素质、
                        专业化的应用型人才，为学生提供优质的教育资源和发展平台。
                        公司还坚持以学生为中心，关注学生的全面发展，提供个性化的教育服务，帮助学生实现自身潜能的最大化。
                        同时，公司还与企业、政府等机构建立紧密合作关系，为学生提供实习、就业等机会，促进学生顺利就业。
                        易凡科技致力于成为一所具有国际竞争力和影响力的学术机构，为学生的未来发展奠定坚实基础。
                    </p>
                </div>
            </div>
        </div>

        <!-- 关于我们轮播图 -->
        <div class="office">
            <p class="animate__animated animate__fadeInTopLeft wow">公司环境</p>
            <span class="animate__animated animate__flipInY wow">Company environment</span>
        </div>
        <div class="container">
            <el-carousel height="500px">
                <el-carousel-item key="1">
                    <div :style="{ backgroundImage: `url(${require('@/assets/images/about/办公环境2.jpg')})` }"></div>
                </el-carousel-item>
                <el-carousel-item key="2">
                    <div :style="{ backgroundImage: `url(${require('@/assets/images/about/办公环境3.jpg')})` }"></div>
                </el-carousel-item>
                <el-carousel-item key="3">
                    <div :style="{ backgroundImage: `url(${require('@/assets/images/about/办公环境4.jpg')})` }"></div>
                </el-carousel-item>
                <el-carousel-item key="4">
                    <div :style="{ backgroundImage: `url(${require('@/assets/images/about/办公环境5.jpg')})` }"></div>
                </el-carousel-item>
                <el-carousel-item key="5">
                    <div :style="{ backgroundImage: `url(${require('@/assets/images/about/餐厅图片.jpg')})` }"></div>
                </el-carousel-item>
            </el-carousel>
        </div>

        <!-- 公司介绍视频 -->
        <div class="company-video-section">
            <div class="page-container">
                <div class="section-header text-center">
                    <h2 class="section-title">公司介绍</h2>
                    <p class="section-desc">了解易凡科技的企业文化和发展历程</p>
                </div>
                <div class="video-container">
                    <el-image 
                        v-if="!isPlaying" 
                        :src="videoThumbnail" 
                        fit="cover" 
                        class="video-thumbnail"
                        @click="playCompanyVideo"
                    >
                        <div class="play-button">
                            <i class="el-icon-video-play"></i>
                        </div>
                    </el-image>
                    <video
                        v-else
                        ref="companyVideo"
                        controls
                        autoplay
                        class="company-video"
                        @ended="stopVideo"
                    >
                        <source :src="videoSource" type="video/mp4">
                        您的浏览器不支持视频播放
                    </video>
                </div>
            </div>
        </div>

        <!-- 团队介绍 -->
        <div class="team-section">
            <div class="page-container">
                <div class="section-header text-center">
                    <h2 class="section-title">核心团队</h2>
                    <p class="section-desc">易凡科技拥有一支充满激情和专业素养的精英团队</p>
                </div>
                <div class="team-container">
                    <div class="team-member" v-for="(member, index) in teamMembers" :key="index">
                        <div class="member-avatar">
                            <img :src="member.avatar" :alt="member.name">
                        </div>
                        <div class="member-info">
                            <h3 class="member-name">{{ member.name }}</h3>
                            <p class="member-position">{{ member.position }}</p>
                            <p class="member-description">{{ member.description }}</p>
                            <div class="member-social">
                                <a v-for="(social, idx) in member.social" :key="idx" :href="social.link" target="_blank">
                                    <i :class="social.icon"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, nextTick } from 'vue';

export default {
    setup() {
        const videoThumbnail = ref(require('@/assets/images/about/办公环境2.jpg'));
        const videoSource = ref('/videos/company-intro.mp4');
        const isPlaying = ref(false);
        const companyVideo = ref(null);
        
        const teamMembers = ref([
            {
                name: '张明',
                position: '创始人兼CEO',
                description: '10年互联网企业管理经验，曾任某知名科技公司技术总监，带领团队成功研发多个行业领先产品。',
                avatar: require('@/assets/images/about/办公环境2.jpg'),
                social: [
                    { icon: 'el-icon-s-custom', link: '#' },
                    { icon: 'el-icon-s-promotion', link: '#' }
                ]
            },
            {
                name: '李晓华',
                position: '技术总监',
                description: '专注于Web开发和系统架构设计，拥有丰富的大型项目开发经验，精通多种编程语言和框架。',
                avatar: require('@/assets/images/about/办公环境3.jpg'),
                social: [
                    { icon: 'el-icon-s-custom', link: '#' },
                    { icon: 'el-icon-s-promotion', link: '#' }
                ]
            },
            {
                name: '王芳',
                position: '产品经理',
                description: '7年产品设计与管理经验，擅长用户体验设计和产品规划，曾主导多个成功的互联网产品。',
                avatar: require('@/assets/images/about/办公环境4.jpg'),
                social: [
                    { icon: 'el-icon-s-custom', link: '#' },
                    { icon: 'el-icon-s-promotion', link: '#' }
                ]
            },
            {
                name: '赵强',
                position: '市场总监',
                description: '拥有丰富的市场推广和品牌建设经验，曾在多家知名企业负责市场战略规划和执行。',
                avatar: require('@/assets/images/about/办公环境5.jpg'),
                social: [
                    { icon: 'el-icon-s-custom', link: '#' },
                    { icon: 'el-icon-s-promotion', link: '#' }
                ]
            }
        ]);
        
        // 播放公司介绍视频
        const playCompanyVideo = () => {
            isPlaying.value = true;
            // 确保DOM更新后再操作视频元素
            nextTick(() => {
                if (companyVideo.value) {
                    companyVideo.value.play();
                }
            });
        };
        
        // 停止视频播放
        const stopVideo = () => {
            isPlaying.value = false;
        };
        
        return {
            videoThumbnail,
            videoSource,
            isPlaying,
            companyVideo,
            teamMembers,
            playCompanyVideo,
            stopVideo
        };
    }
}
</script>

<style lang="scss" scoped>
.gywmzhong {
    margin: 5% 0 0 0;
    padding-bottom: 5%;
}

.gywmzhong>h2 {
    margin: 0 0 20px 15%;
    font-size: 36px;
    font-weight: 900;
}

.gywmzhong>p {
    color: rgb(134, 134, 134);
    margin: 0 0 20px 15%;
    font-family: Franklin Gothic Medium;
}

.gywmrunqi {
    width: 70%;
    margin: 0 auto;
    display: flex;
    padding-bottom: 5%;
}

.gywmrunqi>div {
    width: 100%;
}

.gywmrunqi>div:first-child {
    background-size: 100% 100%;
    height: 400px;
    filter: grayscale(30%);
}

.gywmrunqi>div:last-child>p {
    line-height: 30px;
    letter-spacing: 0.3px;
    color: rgb(134, 134, 134);
    padding: 0 50px 0 50px;
}

.office {
    width: 100%;
    height: 100px;
    background-color: #f5f7fa;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.office>p {
    font-size: 36px;
    font-weight: 900;
    margin: 0;
}

.office>span {
    font-size: 14px;
    color: rgb(134, 134, 134);
    font-family: Franklin Gothic Medium;
}

.container {
    width: 100%;
    margin: 0 auto;
    background-color: #f5f7fa;
    padding-bottom: 5%;

    ::v-deep(.el-carousel) {
        width: 80%;
        margin: 0 auto;
    }

    ::v-deep(.el-carousel__item) div {
        width: 100%;
        height: 100%;
        background-size: 100% 100%;
    }
}

.company-video-section {
    padding: 80px 0;
    background-color: #fff;
    
    .video-container {
        max-width: 900px;
        margin: 50px auto 0;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        position: relative;
        
        .video-thumbnail {
            width: 100%;
            height: 500px;
            position: relative;
            cursor: pointer;
            
            .play-button {
    position: absolute;
                top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
                width: 80px;
                height: 80px;
                background-color: rgba(0, 0, 0, 0.6);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.3s;
                
                i {
                    font-size: 40px;
                    color: #fff;
                }
                
                &:hover {
                    background-color: rgba(0, 0, 0, 0.8);
                    transform: translate(-50%, -50%) scale(1.1);
                }
            }
}

        .company-video {
            width: 100%;
            height: 500px;
            object-fit: cover;
        }
    }
}

.team-section {
    padding: 80px 0;
    background-color: #f5f7fa;
    
    .team-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    margin-top: 50px;
        
        @media (max-width: 1200px) {
            grid-template-columns: repeat(2, 1fr);
}

        @media (max-width: 768px) {
            grid-template-columns: 1fr;
}

        .team-member {
            background-color: #fff;
            border-radius: 10px;
    overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s, box-shadow 0.3s;
            
            &:hover {
                transform: translateY(-10px);
                box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            }
            
            .member-avatar {
                height: 250px;
                overflow: hidden;
                
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    transition: transform 0.3s;
                }
                
                &:hover img {
                    transform: scale(1.05);
}
            }
            
            .member-info {
                padding: 20px;
                
                .member-name {
                    font-size: 20px;
                    font-weight: 600;
                    color: #333;
                    margin: 0 0 5px;
}

                .member-position {
                    font-size: 14px;
                    color: #409EFF;
                    margin: 0 0 15px;
                    font-weight: 500;
                }
                
                .member-description {
                    font-size: 14px;
                    color: #666;
                    line-height: 1.6;
                    margin-bottom: 15px;
                }
                
                .member-social {
                    display: flex;
                    gap: 10px;
                    
                    a {
                        width: 36px;
                        height: 36px;
                        border-radius: 50%;
                        background-color: #f5f5f5;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: #666;
                        transition: all 0.3s;
                        
                        &:hover {
                            background-color: #409EFF;
                            color: #fff;
                        }
                        
                        i {
                            font-size: 18px;
                        }
                    }
                }
            }
        }
    }
}

.section-header {
    margin-bottom: 30px;
    
    .section-title {
        font-size: 32px;
        font-weight: 700;
        color: #333;
        margin-bottom: 15px;
        position: relative;
        display: inline-block;
        
        &:after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background-color: #409EFF;
        }
}

    .section-desc {
        font-size: 16px;
        color: #666;
        max-width: 700px;
        margin: 20px auto 0;
}

    &.text-center {
        text-align: center;
    }
}

.page-container {
    max-width: 1200px;
    padding: 0 15px;
    margin: 0 auto;
}
</style>